<template>
  <el-dialog title="自动新建树" width="30%" destroy-on-close :visible.sync="clonseDialog" @close="onClose">
    <el-form ref="form" :model="formdata" label-width="120px" class="demo-dynamic">
      <el-form-item prop="mode" label="创建模式" :rules="[{ required: true, message: '请输入', trigger: 'change' }]">
        <el-select v-model="formdata.mode" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>  
      <el-form-item prop="time" label="搜索时间" :rules="[{ required: true, message: '请输入', trigger: 'change' }]">
         <el-input
            placeholder="请输入内容"
            v-model="formdata.time"
            clearable>
        </el-input>
      </el-form-item>  
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" @click="handleeviceCacel">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['deviceId'],
  data() {
    return {
      clonseDialog: false,
      loading: false,
      formdata: { 
        mode: 'share',
        time: 10
      },
      options: [
        {
          label: '普通',
          value: 'share'
        },
        {
          label: '网桥',
          value: 'bridge'
        }
      ],
    }
  },
  created() { 
  },
  methods: { 
    open() { 
      this.clonseDialog = true
    },
    // 新建树弹窗取消
    handleeviceCacel() {
      this.clonseDialog = false
    },
    onClose() {
      this.loading = false
      this.$refs.form.resetFields()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          console.log('formdata', this.formdata)
          const { mode, time  } = this.formdata
          this.$http.get(`/api/cloud_device/auto_create?createMode=${mode}&time=${time}`, { 
          }).then(res => {
            if (res.success) {
              this.clonseDialog = false
              this.$refs[formName].resetFields()
            } else {
              this.$error(res.msg)
              this.loading = false
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="less"></style>
